<template>
  <div class="keyClasp">
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        :column="column"
        :getList="getList"
        uniqueId="mesProcessTable"
        @handleOperateEvent="handleOperateEvent"
      >
      </ele-page>
    </div>
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
    </ele-form-drawer>
    <transfer-drawer
      ref="transferDrawer"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import { operateList, searchConfig, rowConfig, formDescDialogMinxin } from './config'
import { getList, rowCreate, rowUpdate, rowDel, rowDetail, addProcessCell, exportUrl, exportExportUrl } from '@/api/cabinet/keyClasp'
import url from '@/axios/url'
import { exportExcel } from '@/utils/judge'
import transferDrawer from './transferDrawer.vue'
const { minioUrl } = url()
export default {
  name: 'keyClasp',
  mixins: [formDescDialogMinxin, searchConfig, operateList],
  components: {
    transferDrawer
  },
  data() {
    return {
      processCodeList: [],
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      // operateList,
      getList,

      visibleCell: false, // 分配工位弹框
      isLoadingCell: false, // 分配工位弹窗loading
      // formDescDialogCell, // 分配工位表单配置
      formDataDialogCell: {}, // 分配工位数据对象
      addProcessCell, // 给现象分配原因
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          prop: 'keyCode',
          label: $i18n.t('keyClasp.keyCode'),
          minWidth: 160,
          showOverflowTooltip: true
        },
        {
          prop: 'statusStr',
          label: $i18n.t('keyClasp.status'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'uwbLongCode',
          label: $i18n.t('keyClasp.UWBCode'),
          minWidth: 160,
          showOverflowTooltip: true
        },
        {
          prop: 'vinCode',
          label: $i18n.t('keyClasp.VINCode'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'remark',
          label: $i18n.t('keyClasp.remark'),
          minWidth: 220,
          showOverflowTooltip: true
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 120,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.iddss === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        export: () => {
          this.$confirm($i18n.t('keyClasp.exportPrompt'), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            const params = { ...this.getSearchParams() }
            exportExcel(exportUrl, params)
          })
        },
        add: () => {
          this.disableFields(false)
          this.formDataDialog = {
            status: '1'
          }
          this.visible = true
        },
        deleteBatch: () => {
          this.$confirm($i18n.t('common.deleteBatch', { name: $i18n.t('keyClasp.name') }), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            const ids = data.rows.map(val => val.id).join(',')
            this.rowDel(ids)
          })
        },
        exportExcel: () => {
          // var url = `${exportExportUrl}/mes-template/标准工序模板.xls`
          // window.open(url)
          exportExcel(exportExportUrl, {})
        }
      }
      fnc[data.handleName]()
    },
    getSearchParams() {
      let formData = this.$refs?.eleTable?.$refs?.eleFormSearch.formData || {}
      // formData = this.getArrtoMap(formData)
      return formData
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row.id)
          this.visible = true
        },
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        },
        delete: () => {
          this.$confirm($i18n.t('common.deleteSingle', { name: $i18n.t('keyClasp.name') }), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.rowDel(row.id)
          })
        },
        transfer: () => {
          this.$refs.transferDrawer.dialogfrom1.uwbLongCode = row.uwbLongCode
          this.$refs.transferDrawer.dialogfrom1.vinCode = row.vinCode
          this.$refs.transferDrawer.dialogfrom2 = {
            id: row.id,
            keyCode: row.keyCode,
            status: row.statusStr,
            remark: row.remark
          }
          this.$refs.transferDrawer.getCarInfo()
          this.$refs.transferDrawer.drawer = true
          // this.getWorkCellList(row.processCode, row.processName, row)
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then(res => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      const params = this.formDataDialog.id
        ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data }
        : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }

      this.doSubmit(params)
    },
    // 删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then(res => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.deleteSuccess'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      rowDetail(id).then(res => {
        this.formDataDialog = res.data.result
      })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
<style scoped lang="scss">
.mesProcess {
  /deep/.el-transfer-panel {
    width: 40% !important;
  }
  .warning-row {
    background: oldlace;
  }
}
</style>
